<template>
  <div style="width:100vw;height:100vh;" class="class-box">
    <!-- 头部 -->
    <!-- <mt-header fixed title="课程详情">
      <div @click="goBack" slot="left">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>-->

    <!-- 主体部分 -->
    <div class="class-body">
      <div class="class-banner">
        <div class="banner-card">
          <div class="banner-tip flex-row">
            <div>
              <p class="banner-tip-text1">{{classDetail.title}}</p>
              <p class="banner-tip-text2">{{classDetail.smallTitle}}</p>
            </div>
            <div class="banner-picture">
              <div class="radius-picture">
                <img src="@/assets/homePicture/xgjt.png" alt="error" />
              </div>
            </div>
          </div>
          <div class="banner-address">
            <span>{{classDetail.address}}</span>
          </div>
          <div class="banner-time">
            <span>{{date}}</span>
            <span>课程时长 {{classDetail.courseTime}} 分钟</span>
          </div>
        </div>
      </div>
      <!-- <div class="class-explain">
        <div class="explain-tip">课程说明</div>
      </div>-->
      <div class="explain-content">
        <div class="bscroll" ref="bscroll1">
          <div class="bscroll-container">
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 1. 整体而言，本次培训值得参加并向其他人推荐
              </p>
              <div class="star-box flex-row">
                <span>评分：</span>
                <div class="star-item" v-for="(num,index) in 5" :key="index" @click="handle(index)">
                  <img :src="number>=index ? good : bad " alt />
                </div>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 2. 我从刚开始就对培训目的非常清晰
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue1" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 3. 培训内容主次分明,非常容易理解
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue2" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 4. 对我而言,培训内容正是我在工作中所需要的
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue3" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 5. 整体而言,讲师讲得非常好
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue4" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 6. 我能感受到讲师对内容及相关知识非常了解
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue5" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 7. 讲师出色地管理了课程,营造了非常好的学习氛围
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue6" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 8. 我会将所学知识应用到工作或生活中
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue7" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 9. 场地的布置让我感受非常的舒适
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue8" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 10. 我能够在不受干扰的情况下,听到或看到授课内容
              </p>
              <div class="star-box">
                <mt-radio class="flex-row" v-model="radiosValue9" :options="radiosList"></mt-radio>
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 11. 您通过本次培训有哪些收获
              </p>
              <div class="star-box">
                <input class="own-input" type="text" v-model="radiosValue11" />
              </div>
            </div>
            <div class="assess-item">
              <p>
                <span style="color:red;">*</span> 12. 为了使课程更有效,您认为需要做哪些调整,或希望课程在哪些主题上花更多或更少的时间
              </p>
              <div class="star-box">
                <input class="own-input" type="text" v-model="radiosValue12" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-group flex-row">
      <mt-button @click.native="confirm()" type="primary" size="large">提交</mt-button>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Indicator, Toast } from "mint-ui";
import { setText } from "../../untils/ddnavigate";
const Easydate = require("../../untils/easydate");
import star1 from "../../assets/studyCenter/star1.png";
import star2 from "../../assets/studyCenter/star2.png";
export default {
  data() {
    return {
      radiosValue1: "1",
      radiosValue2: "1",
      radiosValue3: "1",
      radiosValue4: "1",
      radiosValue5: "1",
      radiosValue6: "1",
      radiosValue7: "1",
      radiosValue8: "1",
      radiosValue9: "1",
      radiosValue11: "",
      radiosValue12: "",
      classDetail: {},
      number: 0,
      good: star2,
      bad: star1,
      radiosList: [
        {
          label: "完全同意",
          value: "1"
        },
        {
          label: "同意",
          value: "2"
        },
        {
          label: "一般",
          value: "3"
        },
        {
          label: "不同意",
          value: "4"
        },
        {
          label: "完全不同意",
          value: "5"
        }
      ]
    };
  },
  mounted() {
    let { id } = this.$route.query;
    let that = this;
    let params = {
      id
    };
    that.$get("qryCourseInfoById", params).then(res => {
      if (res.success) {
        that.classDetail = res.data;
      }
    });
    // 设置标题文字
    setText("课程评估");
    this.$nextTick(() => {
      let bscrollDom = this.$refs.bscroll1;
      this.aBScroll = new BScroll(bscrollDom, {
        click: true
      });
    });
  },
  activated() {},
  computed: {
    date() {
      let dates = this.classDetail.openTime;
      let edate = Easydate(dates);
      return edate.format("yyyy年MM月dd日 tt hh:mm:ss");
    }
  },
  methods: {
    handle(val) {
      this.number = val;
    },
    confirm() {
      let that = this;
      let classDetail = that.classDetail;
      let {
        number,
        radiosValue1,
        radiosValue2,
        radiosValue3,
        radiosValue4,
        radiosValue5,
        radiosValue6,
        radiosValue7,
        radiosValue8,
        radiosValue9,
        radiosValue11,
        radiosValue12
      } = this;
      let params = {
        courseId: classDetail.id,
        row1: number+1,
        row2: Number(radiosValue1),
        row3: Number(radiosValue2),
        row4: Number(radiosValue3),
        row5: Number(radiosValue4),
        row6: Number(radiosValue5),
        row7: Number(radiosValue6),
        row8: Number(radiosValue7),
        row9: Number(radiosValue8),
        row10: Number(radiosValue9),
        row11: radiosValue11,
        row12: radiosValue12
      };
      console.log(params);
      if (that.classDetail.teaStatus != 2) {
        Toast({
          message: "该课程尚未结课",
          duration: 2000
        });
        return;
      }
      if(!this.radiosValue11 || !this.radiosValue11){
        Toast({
          message: "请填写必填项",
          duration: 2000
        });
        return;
      }
      that.$post("courseEva", params).then(res => {
        if (res.success) {
          let toastObj = Toast({
            message: "操作成功",
            iconClass: "mint-toast-icon mintui mintui-success",
            duration: 2000
          });
          setTimeout(() => {
            that.$router.go(-1);
          }, 2000);
        }
      });
    }
    // goBack(){
    //   this.$router.go(-1);
    // }
  }
};
</script>

<style lang="less" scoped>
@import url("~@/pagecss/class-details.less");
// .explain-content {
//   padding-left: 0 !important;
//   padding-right: 0 !important;
// }
.own-input {
  border: 0.5px solid #26a2ff;
  height: 23px;
  width: 89%;
}
.bscroll {
  height: 65vh;
}
.bscroll-container {
  padding-bottom: 50px;
}
.class-box .class-body .explain-content p {
  margin-bottom: 10/75rem;
}
.btn-group {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 23/75rem 30/75rem;
  background-color: #ffffff;
}
.btn-group button {
  flex: 1 0 auto;
}
.mint-button--default {
  margin-right: 66/75rem;
}
.star-box {
  padding-left: 40/75rem;
}
.star-item {
  width: 40/75rem;
  height: 40/75rem;
}
.assess-item {
  padding: 20/75rem 25/75rem;
  border-bottom: 0.5px solid rgba(71, 135, 227, 0.2);
}
</style>